<!DOCTYPE html>
<html>
    <head>
        <title>手柄数据</title>
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body>
        <div class="container">
            <h1>手柄数据记录</h1>
            <a href="/" class="back-link">返回摄像头页面</a>
            
            <table>
                <tr>
                    <th>#</th>
                    <th>左摇杆 X</th>
                    <th>左摇杆 Y</th>
                    <th>右摇杆 X</th>
                    <th>右摇杆 Y</th>
                    <th>时间</th>
                </tr>
                
                {% if not joystick_data %}
                <tr><td colspan="6" style="text-align:center">暂无数据</td></tr>
                {% else %}
                    {% for i, data in enumerate(reversed(joystick_data)) %}
                    <tr>
                        <td>{{ i+1 }}</td>
                        <td>{{ data.get('left_x', 'N/A') }}</td>
                        <td>{{ data.get('left_y', 'N/A') }}</td>
                        <td>{{ data.get('right_x', 'N/A') }}</td>
                        <td>{{ data.get('right_y', 'N/A') }}</td>
                        <td class="timestamp">{{ data.get('timestamp', 0)|timestamp }}</td>
                    </tr>
                    {% endfor %}
                {% endif %}
            </table>
        </div>
    </body>
</html>
